<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
</head>

<body>
    <div id="area" class="any some area1"></div>
    <button id="change" class="xxx xxxx" type="submit" data-as-some="0">change</button>
    <div id="content" class="content"></div>
    <button id="move">move</button>
    <div id="main" class="any some area1"></div>
    <button id="switch" data-bs-toggle="1" data-bs-target="#main">switch</button>
    <style>
        .content {
            width: 200px;
            height: 80px;
            background-color: rebeccapurple;
        }

        .any {
            border: solid 5px purple;
        }

        .area1 {
            width: 200px;
            height: 80px;
            background-color: brown;
        }

        .area2 {
            width: 40px;
            height: 30px;
            opacity: 0.5;
            background-color: green;
        }

        .area3 {
            width: 80px;
            height: 70px;
            opacity: 0.7;
            background-color: blueviolet;
        }
    </style>
    <!--  1-2 2-3 3-1 -->
    <script>
        let c = document.querySelector('#change');
        // c.addEventListener("click", () => {
        //     let r = document.querySelector("#area");
        //     console.log(r.classList);
        //     console.log(r.classList.contains("anyone"))
        //     r.classList.remove("area1");
        //     r.classList.add("area2");
        //     // r.classList.toggle("area1")切换
        // })
        let state = 1;
        // c.dataset.state="1";
        c.addEventListener("click", () => {
            // let state = Number(c.dataset.state);
            let r = document.querySelector("#area");
            if (state === 1) {
                state = 2;
                // c.dataset.state="2";
                r.classList.remove("area1");
                r.classList.remove("area2");
                r.classList.remove("area3");
                r.classList.add("area2");

            } else if (state === 2) {
                state = 3;
                // c.dataset.state="3";
                r.classList.remove("area1");
                r.classList.remove("area2");
                r.classList.remove("area3");
                r.classList.add("area3");

            } else if (state === 3) {
                state = 1;
                // c.dataset.state="1";
                r.classList.remove("area1");
                r.classList.remove("area2");
                r.classList.remove("area3");
                r.classList.add("area1");
            }
        })
        document.querySelector("#move")
            .addEventListener("click", () => {
                let content = document.querySelector("#content");
                // console.log(content);
                // style="transform:translateX(100px);background-color:red"c

                content.style.transform = "translateX(100px)"
                content.style.backgroundColor = "red"
            })
        /* 
            <div id="main" class="any some area1" ></div>
            <button id="switch" data-bs-toggle="collapse" 
            data-bs-target="#main"
           >switch</button>
        */
        let m = document.querySelector("#switch")
        m.addEventListener("click", () => {
            // console.log(m.dataset.bsTarget)
            let s = document.querySelector(m.dataset.bsTarget);
            if (m.dataset.bsToggle === "1") {
                m.dataset.bsToggle = "2"
                s.classList.remove("area1");
                s.classList.remove("area2");
                s.classList.remove("area3");
                s.classList.add("area2");
            } else if (m.dataset.bsToggle === "2") {
                m.dataset.bsToggle = "3"
                s.classList.remove("area1");
                s.classList.remove("area2");
                s.classList.remove("area3");
                s.classList.add("area3");
            } else if (m.dataset.bsToggle === "3") {
                m.dataset.bsToggle = "1"
                s.classList.remove("area1");
                s.classList.remove("area2");
                s.classList.remove("area3");
                s.classList.add("area1");
            }
        });

        let sss = document.querySelectorAll("[data-bs-toggle]")
    </script>
</body>

</html>